<template>
    <div class="button">
      <button type="button" v-show="counts>0" :style="{color:colors ,borderColor: colors}"  @click="reduce">-</button>
      <span v-show="counts>0" style="color: #F54727">{{counts}}</span>
      <button type="button" @click="add" :class="{nomounts: counts < mounts}" :style="{color:colors,borderColor: colors}" >+</button>
    </div>
</template>

<script type="ECMAScript 6">
    export default {
        name: 'add-decrsde',
        props: {
          good: Object,
          color: String
        },
      data () {
          return {
            goods: this.good,
            counts: this.good.counts,
            stocks: this.good.sorts,
            mounts: 1,
            colors: this.color
          };
      },
      methods: {
        add () {
          if (this.counts <= this.stocks) {
            this.counts++;
            this.stocks--;
            this.$set(this.goods, 'counts', this.counts);
            this.$set(this.goods, 'sorts', this.stocks);
            this.$set(this.goods, 'select', 1);
            this.$set(this.goods, 'subtotal', (this.goods.prices * this.counts).toFixed(2));
            this.$emit('addMount', this.goods);
          }
        },
        reduce () {
          if (this.counts <= 1) {
            this.$messagebox.alert('数量不能少于1').then(action => {
            });
          } else {
            this.counts--;
            this.stocks++;
            this.$set(this.goods, 'subtotal', (this.goods.prices * this.counts).toFixed(2));
            this.$set(this.goods, 'counts', this.counts);
            this.$set(this.goods, 'sorts', this.stocks);
            this.$emit('addMount', this.goods);
          }
        }
      },
      create () {
        console.log(this.goods);
      }
    };
</script>

<style lang="stylus" scoped>
  .button
   display flex; align-items center; position absolute;right 0
   &>button
    display inline-block; width 25px; height 25px; border-radius 50%; border 1px solid #BDBDBD; text-align center; font-size 17px; color #BDBDBD; line-height 25px; background transparent;padding 0; box-sizing unset;
   &>button.nomounts
     border 1px solid #41B962; background #41B962; color #fff
    &>span
      margin 0 5px;
</style>
